import { Carousel } from 'antd-mobile';
import React from "react"
import axios from "../../../http/myaxios"
import { withRouter } from "react-router-dom"
class App extends React.Component {
  state = {
    data: [],
    imgHeight: 176,
  }
  componentDidMount() {
    axios.get("home/swiperdata").then(res=>{
        this.setState({
            data:res.message||[]
        })
    })
  }
  handleClick = (e) => {
    //   console.log(e.currentTarget.dataset.id);
      this.props.history.push("/goodDetail/"+e.currentTarget.dataset.id);
  }
  render() {
    return (
   
        <Carousel
          autoplay={false}
          infinite
        >
          {this.state.data.map(val => (
            <div
              data-id={val.goods_id}
              onClick={this.handleClick}
              key={val.goods_id}
              style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
            >
              <img
                src={val.image_src}
                alt=""
                style={{ width: '100%', verticalAlign: 'top' }}
                onLoad={() => {
                  // fire window resize event to change height
                  window.dispatchEvent(new Event('resize'));
                  this.setState({ imgHeight: 'auto' });
                }}
              />
            </div>
          ))}
        </Carousel>
    );
  }
}
export default withRouter(App);